<template>
  <ContentBox :has-corner="true" class="community-today-info">
    <div class="community-today-info__content">
      <div class="community-today-info__content__item">
        <div class="video1" style="display: flex;">
          <video
            style="width: 40%;"
            autoplay
            muted
            loop
            @click="handleOpenModal('mp4', 'https://smart-property.oss-cn-hangzhou.aliyuncs.com/web-common/menjinyouxinxi.mp4')"
            class="video1"
            src="https://smart-property.oss-cn-hangzhou.aliyuncs.com/web-common/menjinyouxinxi.mp4"
          ></video>
          <div
            style="flex: 1; flex-direction: column; align-items: flex-end; justify-content: space-between;"
            class="community-today-info__content__item__title"
          >
            <div>
              今日进场人数：
              <span class="c09F04D">{{ item.comeCount }}</span>人
            </div>
            <div>
              今日出场人数：
              <span class="cDD9D30">{{ item.leaveCount }}</span>人
            </div>
            <div>
              体温正常人数：
              <span class="c09F04D">30</span>人
            </div>
            <div>
              体温异常人数：
              <span class="cD72B41">0</span>人
            </div>
            <div>
              佩戴口罩人数：
              <span class="12D5EC">29</span>人
            </div>
            <div>
              未佩戴口罩人数：
              <span class="cDD9D30">1</span>人
            </div>
          </div>
        </div>
        <div class="community-today-info__content__item__footer">
          <div>{{ item.address }}</div>
          <div>{{ item.NO}}</div>
        </div>
      </div>

      <div class="community-today-info__content__item">
        <div class="community-today-info__content__item__title">
          <div>
            今日进场车辆：
            <span class="c09F04D">{{ item.comeCarCount }}</span>辆
          </div>
          <div>
            今日出场车辆：
            <span class="cDD9D30">{{ item.leaveCarCount }}</span>辆
          </div>
        </div>
        <div style="position: relative">
          <div class="cover" @click="handleOpenModal('', communityInfo.camera.daozha)"></div>
          <iframe
            @click="handleOpenModal('', communityInfo.camera.daozha)"
            class="video1"
            :src="communityInfo.camera.daozha"
          ></iframe>
        </div>
        <div class="community-today-info__content__item__footer">
          <div>{{ item.carAddress }}</div>
          <div>{{ item.carNO}}</div>
        </div>
      </div>
      <div class="community-today-info__content__footer">
        <div style="position: relative">
          <div class="cover" @click="handleOpenModal('', communityInfo.camera.daozha_left)"></div>
          <!-- <img :src="imgPlaceholder" class="img2"> -->
          <iframe
            @click="handleOpenModal('', communityInfo.camera.daozha_left)"
            :src="communityInfo.camera.daozha_left"
            class="img2"
          />
          <div class="community-today-info__content__item__footer">
            <div>{{ item.carAddress1 }}</div>
            <div>{{ item.carNO1}}</div>
          </div>
        </div>
        <div style="position: relative">
          <div class="cover" @click="handleOpenModal('', communityInfo.camera.daozha_right)"></div>
          <!-- <img :src="imgPlaceholder" class="img2"> -->
          <iframe
            @click="handleOpenModal('', communityInfo.camera.daozha_right)"
            :src="communityInfo.camera.daozha_right"
            class="img2"
          ></iframe>
          <div class="community-today-info__content__item__footer" style>
            <div>{{ item.carAddress2 }}</div>
            <div>{{ item.carNO2}}</div>
          </div>
        </div>
      </div>
    </div>
  </ContentBox>
</template>

<script>
import ContentBox from '@/components/ContentBox'
export default {
  name: 'CommunityTodayInfo',
  components: {
    ContentBox
  },
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      modalVisible: false,
      type: '',
      videoSrc: ''
    }
  },
  computed: {
    communityInfo () {
      return this.$store.getters.communityInfo
    }
  },
  methods: {
    handleOpenModal (type, src) {
      const param = {
        type,
        videoSrc: src,
        visible: true
      }
      this.$store.commit('SET_VIDEO_DIALOG', param)
    },
    handleCloseModal () {
      this.type = ''
      this.videoSrc = ''
      this.modalVisible = false
    }
  }
}
</script>

<style lang="scss">
.community-today-info {
  width: $base * 360px;
  color: #fff;
  font-size: $base * 14px;
  padding: $base * 20px;
  box-sizing: border-box;
  height: $base * 650px;
  z-index: 1;

  .community-today-info__content__item {
    & + .community-today-info__content__item {
      margin-top: $base * 10px;
    }

    .community-today-info__content__item__title {
      display: flex;
      justify-content: space-between;
      margin-bottom: $base * 4px;

      > div span {
        font-size: $base * 16px;
        font-weight: bold;
      }

      > div span.c09F04D {
        color: $txt_c1;
      }

      > div span.cDD9D30 {
        color: $txt_c2;
      }

      > div span.cD72B41 {
        color: $txt_c3;
      }

      > div span.c12D5EC {
        color: $txt_c4;
      }
    }
  }

  .community-today-info__content__item__footer {
    display: flex;
    justify-content: space-between;
    background: #0c2143;
    line-height: $base * 27px;
    padding: 0 $base * 4px;
  }

  .video1 {
    // width: 320px;
    width: 100%;
    height: $base * 185px;
    display: block;
    cursor: pointer;
  }

  .img2 {
    width: $base * 150px;
    height: $base * 114px;
    cursor: pointer;
    display: block;
  }

  .community-today-info__content__footer {
    display: flex;
    margin-top: $base * 10px;
    justify-content: space-between;
  }
}

.modal {
  position: fixed;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: auto;

  .modal__wrapper {
    width: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;

    video {
      width: 50%;
      margin: 0 auto;
    }

    iframe {
      width: 100%;
      height: 100%;
    }
  }
}

iframe {
  border: none;
}

.cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}
</style>